<template>
	<div class="index-page-container">
		<!-- banner图 -->
		<div class="index-banner-wrapper">
			<img :src="bannerUrl" alt="nuxt" />
			<div class="index-banner-text">
				<div class="index-banner-text-title">理想国</div>
				<div class="index-banner-text-title">沉浸于AI角色扮演的世界</div>
				<button class="index-banner-btn">开始体验</button>
			</div>
		</div>

		<!-- 对话列表 -->
		<div class="dialog-list-wrapper">
			<div v-for="item in roleList" :key="item.id" class="dialog-list-item">
				<div class="role-info">
					<div class="role-info-name">
						<div class="role-info-avatar">
							<img :src="item.avatar" alt="" />
						</div>
						<span>{{ item.name }}</span>
					</div>
					<div class="role-info-desc">{{ item.description }}</div>
					<a-button class="role-info-btn" type="primary" size="large" @click="handleSelectModel(item)">开始对话</a-button>
				</div>
				<div class="role-image">
					<img :src="item.image" />
				</div>
			</div>
		</div>

		<!-- 更多对话 -->
		<div class="other-dialog-wrapper">
			<div class="other-dialog-title">更多角色</div>
			<div class="other-dialog-desc">探索更多角色，与他们进行对话</div>
			<div class="other-dialog-list">
				<div
					v-for="(item, index) in moreRoleList"
					:key="item.id"
					class="other-role"
					:class="{'can-select': getVisualIndex(index) <= 1 && getVisualIndex(index) >= -1}"
					@click="handleClickMoreRole(item, index)"
					:style="getCardStyle(getVisualIndex(index))"
				>
					<div class="other-role-avatar">
						<img :src="item.avatar" alt="" />
					</div>
					<div class="other-role-name">{{ item.name }}</div>
					<div class="other-role-desc">{{ item.description }}</div>
					<a-button class="other-role-btn" type="primary" size="large" @click="handleSelectModel(item)">开始对话</a-button>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup>
// ------------------- import -------------------
import { ref, reactive, onMounted } from 'vue';
import { useRouter } from 'nuxt/app';
import { getCharacters } from "~/api/chat";
import { getModelList, getMoreModelList } from '~/api/index';
// ------------------- data -------------------
const router = useRouter();
// 角色列表
const roleList = reactive([]);
// banner图
const bannerUrl = "https://seven-cow.obs.cn-south-1.myhuaweicloud.com/banner/three_people.png";

// 更多角色列表
const moreRoleList = reactive([]);

// ------------------- function -------------------
// 选择模型并跳转到聊天页面
const handleSelectModel = (model) => {
  router.push(`/myChat?id=${model.id}`);
};

const handleInit = async () => {
	// 初始化角色列表
	const res = await getCharacters();
	const cardList = res.data.filter(item => item.image)
	roleList.push(...cardList);
	// 初始化更多角色列表
	const moreRes = await getCharacters();
	moreRoleList.push(...moreRes.data);
}

// 当前选中的卡片索引
const currentIndex = ref(0);

// 计算视觉索引，实现循环效果
const getVisualIndex = (index) => {
	const totalCards = moreRoleList.length;
	// 计算相对于当前选中卡片的偏移量
	let visualIndex = (index - currentIndex.value + totalCards) % totalCards;

	// 将视觉索引映射到 -4 到 4 的范围
	if (visualIndex > 4) {
		visualIndex -= totalCards;
	}

	return visualIndex;
};

// 计算卡片样式
const getCardStyle = (visualIndex) => {
	// 根据视觉索引计算样式
	const distance = Math.abs(visualIndex);
	let scale = 1;
	let opacity = 1;
	let blur = 0;
	let zIndex = 10 - distance;
	let translateX = 0;
	let cursor = 'default';

	if (distance === 0) {
		// 中间的卡片
		scale = 1;
		opacity = 1;
		blur = 0;
		zIndex = 10;
		translateX = 0;
		cursor = 'pointer';
	} else if (distance === 1) {
		// 相邻的卡片
		scale = 0.95;
		opacity = 0.95;
		blur = 0;
		zIndex = 9;
		translateX = visualIndex > 0 ? 340 : -340;
		cursor = 'pointer';
	} else if (distance === 2) {
		scale = 0.9;
		opacity = 0.9;
		blur = 0.8;
		zIndex = 8;
		translateX = visualIndex > 0 ? 680 : -680;
		cursor = 'default';
	} else if (distance === 3) {
		scale = 0.85;
		opacity = 0.85;
		blur = 1.6;
		zIndex = 7;
		translateX = visualIndex > 0 ? 1020 : -1020;
		cursor = 'default';
	} else {
		// 更远的卡片
		scale = 0.8;
		opacity = 0;
		blur = 2;
		zIndex = 6;
		translateX = visualIndex > 0 ? 1360 : -1360;
		cursor = 'default';
	}

	// 使用will-change优化性能，但保留过渡动画
	return {
		transform: `translateX(${translateX}px) scale(${scale})`,
		opacity: opacity,
		filter: `blur(${blur}px)`,
		zIndex: zIndex,
		transition: 'transform 0.5s cubic-bezier(0.25, 0.1, 0.25, 1), opacity 0.5s ease, filter 0.5s ease',
		willChange: 'transform, opacity, filter',
		cursor: cursor
	};
};

// 处理卡片点击事件
const handleClickMoreRole = (item, index) => {
	const visualIndex = getVisualIndex(index);
	
	if (visualIndex > 1 || visualIndex < -1) {
	    return;
	}
	// 更新当前选中的卡片索引
	currentIndex.value = index;
};

// ------------------- function -------------------
onMounted(() => {
    // 每隔5s自动轮播
    setInterval(() => {
        currentIndex.value = (currentIndex.value + 1) % moreRoleList.length;
    }, 3000);
});
onMounted(() => {
    handleInit();
})
</script>

<style lang="scss">
@font-face {
	font-family: 'OPPOSans';
	font-style: normal;
	font-weight: 400;
	// 字体路径基于public目录
	src: url('/fonts/OPPOSans-H.ttf') format('truetype');
	font-display: swap; // 优化字体加载体验
}

.index-page-container {
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 100%;

	.index-banner-wrapper {
		display: flex;
		justify-content: flex-end;
		align-items: flex-end;
		width: 100%;
		height: 400px;
		overflow: hidden;
		background: linear-gradient(to left, #f9fbfa 0%, #f3f3f1 100%);
		position: relative;

		img {
			height: 100%;
			margin-right: 250px;
			filter: drop-shadow(0 0 100px rgba(253, 173, 53, 0.7));
			border-radius: 8px;
			transition: all 0.3s ease;
			cursor: pointer;

			&:hover {
				filter: drop-shadow(0 0 100px rgba(253, 173, 53, 1));
				transform: scale(1.02);
			}
		}

		.index-banner-text {
			position: absolute;
			top: 20%;
			left: 200px;
			color: rgba(8, 13, 30, 0.95);
			font-size: 60px;
			font-weight: normal;
			line-height: 80px;
			display: flex;
			flex-direction: column;

			&-title {
				font-family: 'OPPOSans', sans-serif;
			}
		}

		.index-banner-btn {
			align-items: center;
			animation: flow-light 4s linear infinite backwards;
			animation-delay: 1s;
			background-clip: padding-box, border-box;
			background-color: #212635;
			background-image: linear-gradient(to bottom right, #0b0333, #212635),
				linear-gradient(125deg, hsla(0, 0%, 100%, 0) 45%, hsla(0, 0%, 100%, 0.6) 50%, hsla(0, 0%, 100%, 0) 53%);
			background-origin: border-box;
			background-position: 0, -250px;
			background-size: 100%, 200%;
			border: 3px solid transparent;
			border-radius: 10px;
			box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.14);
			color: #fff;
			display: flex;
			font-size: 22px;
			font-weight: 600;
			height: 60px;
			justify-content: center;
			line-height: 32px;
			overflow: hidden;
			position: relative;
			width: 180px;
			z-index: 1;
			margin-top: 20px;
			cursor: pointer;
			transition: all 0.3s ease;

			&:hover {
				transform: scale(1.02);
			}

			&::after {
				animation: glint 4s linear infinite backwards;
				animation-delay: -3s;
				background-image: linear-gradient(125deg, hsla(0, 0%, 100%, 0) 30%, hsla(0, 0%, 100%, 0.4) 50%, hsla(0, 0%, 100%, 0) 52%);
				content: ' ';
				height: 200%;
				left: -120%;
				position: absolute;
				top: -50%;
				width: 200%;
			}

			@keyframes glint {
				0% {
					left: -120%;
				}

				8% {
					left: 50%;
				}

				100% {
					left: 50%;
				}
			}

			@keyframes flow-light {
				0% {
					background-position: 0, -250px;
				}
				25% {
					background-position: 0, -200px;
				}
				75% {
					background-position: 0, 50px;
				}
				100% {
					background-position: 0, 50px;
				}
			}
		}
	}

	.dialog-list-wrapper {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(550px, 1fr));
		width: 100%;
		padding: 100px 60px;
		padding-bottom: 120px;
		gap: 80px 20px;

		.dialog-list-item {
			display: flex;
			gap: 20px;
			width: 550px;
			height: 250px;
			border-radius: 8px;
			border: 1px solid #ddd;
			padding: 20px 40px;
			position: relative;
			transition: all 0.3s ease;
			cursor: pointer;
			box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.05);

			&:hover {
				box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.12);
				.role-image {
					img {
						transform: translateY(-30px) rotate(3deg);
					}
				}
			}

			.role-info {
				display: flex;
				flex-direction: column;
				gap: 10px;
				width: 100%;
				height: 100%;

				.role-info-name {
					display: flex;
					align-items: center;
					gap: 16px;
					font-size: 32px;
					line-height: 32px;
					font-weight: 700;
					color: rgba(8, 13, 30, 0.95);
				}
				.role-info-avatar {
					width: 50px;
					height: 50px;
					border-radius: 100%;
					overflow: hidden;

					img {
						width: 100%;
						height: 100%;
						object-fit: cover;
					}
				}
				.role-info-desc {
					font-size: 14px;
					font-weight: 400;
					line-height: 24px;
					color: rgba(8, 13, 30, 0.7);
				}
				.role-info-btn {
					width: 150px;
					margin-top: auto;
				}
			}

			.role-image {
				position: absolute;
				bottom: 180px;
				right: 0;
				width: 200px;
				min-width: 200px;
				height: 400px;
				margin-bottom: 40px;
				object-fit: cover;
				position: relative;
				overflow: hidden;
				// border: 1px solid skyblue;

				img {
					position: absolute;
					bottom: -40px;
					right: 0;
					height: 350px;
					border-radius: 8px;
					// border: 1px solid #ccc;
					transition: transform 0.3s ease;
				}
			}
		}
	}

	.other-dialog-wrapper {
		display: flex;
		flex-direction: column;
		align-items: center;
		background-color: #f6f9fb;
		gap: 20px;
		width: 100%;
		padding: 80px 60px;
		padding-bottom: 180px;
		overflow-x: hidden;

		.other-dialog-title {
			font-size: 60px;
			font-weight: 700;
			margin-bottom: 10px;
			color: #080d1e;
		}

		.other-dialog-desc {
			font-size: 28px;
			font-weight: 400;
			line-height: 24px;
			margin-bottom: 60px;
			color: rgba(8, 13, 30, 0.7);
		}

		.other-dialog-list {
			display: flex;
			align-items: center;
			justify-content: center;
			gap: 0;
			min-width: 100%;
			height: 500px;
			position: relative;
			perspective: 1000px; /* 添加3D透视效果 */
			transform-style: preserve-3d; /* 保持3D变换 */

			.other-role {
				display: flex;
				flex-direction: column;
				align-items: center;
				gap: 20px;
				margin-bottom: 20px;
				padding: 20px 40px;
				width: 300px;
				height: 400px;
				max-height: 400px;
				border-radius: 16px;
				background-color: #fff;
				box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.05);
				cursor: pointer;
				backface-visibility: hidden; /* 防止背面可见 */
				transform-style: preserve-3d; /* 保持3D变换 */
				position: absolute;
				left: 50%;
				top: 50%;
				margin-left: -150px;
				margin-top: -200px;
				/* 确保硬件加速 */
				transform: translateZ(0);
				transition: all 0.3s ease;

				&.can-select {
					transition: all 0.3s ease;

					&:hover {
						box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.12);
					}
				}

				.other-role-avatar {
					width: 100px;
					height: 100px;
					border-radius: 50%;
					font-size: 40px;
					font-weight: 700;

					img {
						width: 100%;
						height: 100%;
						object-fit: cover;
						border-radius: 50%;
						backface-visibility: hidden; /* 防止图片背面可见 */
						/* 确保硬件加速 */
						transform: translateZ(0);
					}
				}

				.other-role-name {
					font-size: 24px;
					font-weight: 700;
					color: #080d1e;
					text-align: center;
				}

				.other-role-desc {
					font-size: 16px;
					line-height: 24px;
					color: #666;
					text-align: center;
				}

				.other-role-btn {
					display: flex;
					margin-top: auto;
				}
			}
		}
	}
}
</style>
